<template>
  <div class="callDriver">
    <div class="cost_estimate" v-show="curCall=='call'">
        <i class="iconfont icon-icon2" @click="isCancelCall(true)"></i>
        <p>约<b class="f26">{{total_amount.total_cost}}</b>元</p>
        <!-- <p>{{total_amount}}</p>    -->
        <p>优惠卷抵扣{{total_amount.return_fee}}元</p>
    </div>
    <div class="" >
        <ibutton @click="callCar" v-if="curCall=='call'">呼叫快车</ibutton>
        <ibutton @click="orderCancel" v-if="curCall=='calling'">取消呼叫</ibutton>
    </div>

    <!-- <div class="cancelShadow" v-show="cancelShadow">
        <div class="content">
            <i class="iconfont icon-shibai" @click="isCancelCall(false)"></i>
            <p>确定要取消订单吗？</p>
            <ibutton @click="isCancelCall(true)">确认</ibutton>
        </div>
    </div> -->
  </div>
</template>

<script>
    let polyline = null;
    import ibutton from '@/components/common/ibutton'
    import {addMarker,addTrack} from '@s/map.js'
    import {mapGetters} from 'vuex'
    import {direction,costEstimate,curOrder,orederAdd,orderCancel,getCurDriverPos} from '@/http'
    import {mapkey} from '@s/webConfig.js'
    export default {
        name:'callDriver',
        data(){
            return{
                curCall:'call',
                cancelShadow:false,
                total_amount:{
                    dynamic_fee:0,
                    mileage_fee:0,
                    night_fee:0,
                    remote_fee:0,
                    return_fee:0,
                    starting_fee:0,
                    timer_fee:0,
                    total_cost:0
                },
                curOrderDistance:'',
                curOrderDuration:''

            }
        },
        computed:{
            ...mapGetters(['marker','startPos','endPos','login_info','cookie','curOrder'])
        },
        components:{ibutton},
        methods:{
            isCancelCall(val){
                if(val){
                    this.$store.dispatch('switchTravel','selectAddr')
                    this.$router.push('/');
                    this.cancelShadow=false
                    this.curCall='call'
                }else{
                    this.cancelShadow=val
                }
            },
            callCar(){
                
                let user_id = this.login_info.user_id;
                let departure = this.startPos.addr;
                let dep_longitude = this.startPos.lng;
                let dep_latitude = this.startPos.lat;
                let destination = this.endPos.addr;
                let des_longitude = this.endPos.lng;
                let des_latitude = this.endPos.lat;
                let distance = this.curOrderDistance;
                let duration = this.curOrderDuration;
                let region = '0760';
                orederAdd({
                    user_id,departure,dep_longitude,dep_latitude,
                    destination,des_longitude,des_latitude,distance,duration
                }).then((data)=>{

                    if(data.code != '0'){ //有订单为支付

                      this.$msgBox({
                        title: '提示',
                        message: data.msg,//data.msg,
                        showCancelButton: true
                        }).then((val)=>{
                            //链接到我的订单页面
                            if(val == 'confirm'){
                                if(data.code == '2'){

                                    this.$router.push('login')
                                }else{

                                    this.$router.push('myOrder')
                                }
                            }
                        })
                    }else{  //叫车
                        this.curCall='calling';
                        this.$store.dispatch('curOrder',{id:data.data.order_id})
                        // 启动订单状态监听
                        this.$store.dispatch('travelStatusListen',true);
                    }
                    
                })
            },
            orderCancel(){
                // this.cancelShadow=true
                let order_id = this.curOrder.id;
                let user_id = this.login_info.user_id;
                orderCancel({user_id,order_id}).then((data)=>{
                    this.$tip({
                        message: data.msg,
                        position: 'bottom',
                        duration: 2000
                    });
                    if(data.code=='0'){

                        // 取消订单状态监听
                        this.$store.dispatch('travelStatusListen',false);

                        this.$store.dispatch('switchTravel','selectAddr')
                    }
                })
            },
            //车费预估
            costEstimate(){
                let from=`${this.startPos.lat},${this.startPos.lng}`;
                let to=`${this.endPos.lat},${this.endPos.lng}`;
                
                //距离计算
                direction({from,to}).then((data)=>{ 
                    let des_latitude = this.endPos.lat;
                    let des_longitude = this.endPos.lng;
                    let dep_latitude = this.startPos.lat;
                    let dep_longitude = this.startPos.lng;
                    let distance = this.curOrderDistance = data.result.routes[0].distance / 1000;
                    let duration = this.curOrderDuration = data.result.routes[0].duration * 60;

                    //车费预估
                    costEstimate({des_latitude,des_longitude,dep_latitude,dep_longitude,distance,duration}).then((data)=>{
                        
                        if(data.code != 0){ // 登录过期
                            this.$msgBox({
                                    title: '提示',
                                    message: ata.msg,
                                })
                            this.$router.push('login')
                            this.$store.dispatch('switchTravel','selectAddr')
                        }else{
                            this.$nextTick(()=>{
                                this.total_amount = data.data.total_amount
                            })
                        }
                    })

                    // 添加轨迹
                    let latLngArr = data.result.routes[0].polyline;
                    for (let i = 2; i < latLngArr.length ; i++){  //解压polyline
                        latLngArr[i] = latLngArr[i-2] + latLngArr[i]/1000000
                    }
                    polyline = addTrack(latLngArr)
                    
                })

            }
        },
        mounted(){
         
            // 添加起点marker
            addMarker({ 
                lat:this.startPos.lat,
                lng:this.startPos.lng,
                icon:this.marker.start.img,
                scaleSize:[27,41],
                anchor:[27,20.5]
            })
            // 添加终点marker
            addMarker({
                lat:this.endPos.lat,
                lng:this.endPos.lng,
                icon:this.marker.end.img,
                scaleSize:[27,41],
                anchor:[27,20.5]
            })
        },
        created(){
            this.costEstimate();
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';
    
    .callDriver{
        width:100%;
        .cost_estimate{
            position: relative;
            width:100%;
            background-color:$white;
            text-align: center;
            padding:100px;
            margin-bottom:50px;
            box-shadow: 0 0 8px 0 $border_base;
            p:last-child{
                color:$font_color_sub;
            }
            .icon-icon2{
                position: absolute;
                top:0;
                right:0;
                padding:20px;
                color:$font_color_sub;
            }
        }
        .cancelShadow{
            position: fixed;
            z-index: 999;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,.5);
            .content{
                position: absolute;
                top:50%;
                left:10%;
                transform: translate3d(0,-50%,0);
                width:80%;
                height:500px;
                background:$white;
                border-radius: 10px;
                display: flex;
                align-items: center;
                flex-direction: column;
                padding:50px;
                font-size: 20px;
                p{
                    line-height: 200px
                }
                .iconfont{
                    position:absolute;
                    top:0;
                    right:4px;
                    // transform: translate3d(50%,-50%,0);
                    font-size: 30px;
                    color:rgba(0,0,0,.4);
                }
            }
        }
    }
</style>

